<template>
  <div class="radio-rank">
    <div class="box" v-for="(item,index) of item"
         :key="index"  @click="itemClick(index)">
      <div class="top">
        <p class="rank">1</p>
        <img :src="item.picUrl" alt="">
      </div>
      <div class="bottom">
        <p class="bottom-name">{{item.name}}</p>
        <p class="bottom-singer">{{item.singer}}</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "RadioRankStyle1",
        props:{
          item:{
              type:Array,
              default(){
                  return[]
              }
          }
        },
        data(){
            return{

            }
        },
        methods:{
            itemClick(index){
                console.log(this.item[index].id)
            }
        },
        created() {

        }
    }
</script>

<style scoped>
  .radio-rank{
    width: 80px;
  }

  .box{
    width: 80px;
  }

  .top{
    width: 80px;
  }

  .rank{
    text-align: center;
    font-weight: 600;
    color: #DB2C1F;
    font-size: 25px;
    margin-bottom: 5px;
  }

  .top img{
    border-radius: 8px;
    width: 80px;
    height: 80px;
  }

  .bottom{
    text-align: center;
    font-size: 13px;
  }

 .bottom-name{

 }

  .bottom-singer{

  }


</style>